<template>
  <div class="gauge-chart" :style="{ width: width + 'px', height: height + 'px' }">
    <!-- <div class="chart-header">
      <h3 class="chart-title">{{ title }}</h3>
    </div> -->
    <div class="chart-content">
      <svg :width="chartSize" :height="chartSize" class="chart-svg">
        <!-- 背景圆弧 -->
        <path 
          :d="backgroundPath" 
          fill="none" 
          stroke="#f0f0f0" 
          :stroke-width="strokeWidth"
          class="background-arc"
        />
        
        <!-- 进度圆弧 -->
        <path 
          :d="progressPath" 
          fill="none" 
          :stroke="color" 
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          class="progress-arc"
        />
        
        <!-- 中心点 -->
        <circle 
          :cx="centerX" 
          :cy="centerY" 
          :r="4" 
          :fill="color"
          class="center-dot"
        />
        
        <!-- 指针 -->
        <line 
          :x1="centerX" 
          :y1="centerY" 
          :x2="pointerX" 
          :y2="pointerY" 
          :stroke="color" 
          stroke-width="2"
          class="pointer"
        />
        
        <!-- 刻度 -->
        <g v-for="(tick, index) in ticks" :key="index">
          <line 
            :x1="tick.x1" 
            :y1="tick.y1" 
            :x2="tick.x2" 
            :y2="tick.y2" 
            stroke="#ddd" 
            stroke-width="1"
            class="tick-line"
          />
          <text 
            :x="tick.textX" 
            :y="tick.textY" 
            text-anchor="middle" 
            dominant-baseline="middle"
            class="tick-label"
          >
            {{ tick.value }}
          </text>
        </g>
      </svg>
      
      <!-- 数值显示 -->
      <div class="value-display">
        <div class="current-value">{{ formattedValue }}</div>
        <div class="value-range">{{ min }} - {{ max }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  width?: number
  height?: number
  title?: string
  value?: number
  min?: number
  max?: number
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  width: 300,
  height: 200,
  title: '仪表盘',
  value: 65,
  min: 0,
  max: 100,
  color: '#409EFF'
})

// 计算属性
const chartSize = computed(() => Math.max(100, Math.min(props.width, props.height) - 40))
const centerX = computed(() => chartSize.value / 2)
const centerY = computed(() => chartSize.value / 2)
const radius = computed(() => Math.max(30, (chartSize.value / 2) - 30))
const strokeWidth = computed(() => Math.max(8, radius.value * 0.1))

// 角度计算
const startAngle = -Math.PI * 0.75 // 从10点钟方向开始
const endAngle = Math.PI * 0.75 // 到2点钟方向结束
const totalAngle = endAngle - startAngle

const normalizedValue = computed(() => {
  const range = props.max - props.min
  return range > 0 ? Math.max(0, Math.min(1, (props.value - props.min) / range)) : 0
})

const currentAngle = computed(() => {
  return startAngle + normalizedValue.value * totalAngle
})

// 路径生成
const backgroundPath = computed(() => {
  const x1 = centerX.value + radius.value * Math.cos(startAngle)
  const y1 = centerY.value + radius.value * Math.sin(startAngle)
  const x2 = centerX.value + radius.value * Math.cos(endAngle)
  const y2 = centerY.value + radius.value * Math.sin(endAngle)
  
  const largeArcFlag = totalAngle > Math.PI ? 1 : 0
  
  return `M ${x1} ${y1} A ${radius.value} ${radius.value} 0 ${largeArcFlag} 1 ${x2} ${y2}`
})

const progressPath = computed(() => {
  const x1 = centerX.value + radius.value * Math.cos(startAngle)
  const y1 = centerY.value + radius.value * Math.sin(startAngle)
  const x2 = centerX.value + radius.value * Math.cos(currentAngle.value)
  const y2 = centerY.value + radius.value * Math.sin(currentAngle.value)
  
  const largeArcFlag = (currentAngle.value - startAngle) > Math.PI ? 1 : 0
  
  return `M ${x1} ${y1} A ${radius.value} ${radius.value} 0 ${largeArcFlag} 1 ${x2} ${y2}`
})

// 指针位置
const pointerX = computed(() => {
  return centerX.value + (radius.value - 10) * Math.cos(currentAngle.value)
})

const pointerY = computed(() => {
  return centerY.value + (radius.value - 10) * Math.sin(currentAngle.value)
})

// 刻度
const ticks = computed(() => {
  const tickCount = 5
  const ticks = []
  
  for (let i = 0; i <= tickCount; i++) {
    const value = props.min + (props.max - props.min) * (i / tickCount)
    const angle = startAngle + (totalAngle * i / tickCount)
    
    const innerRadius = radius.value - 15
    const outerRadius = radius.value + 5
    
    const x1 = centerX.value + innerRadius * Math.cos(angle)
    const y1 = centerY.value + innerRadius * Math.sin(angle)
    const x2 = centerX.value + outerRadius * Math.cos(angle)
    const y2 = centerY.value + outerRadius * Math.sin(angle)
    
    const textRadius = radius.value + 20
    const textX = centerX.value + textRadius * Math.cos(angle)
    const textY = centerY.value + textRadius * Math.sin(angle)
    
    ticks.push({
      value: Math.round(value),
      x1,
      y1,
      x2,
      y2,
      textX,
      textY
    })
  }
  
  return ticks
})

// 格式化数值
const formattedValue = computed(() => {
  return Math.round(props.value)
})
</script>

<style lang="scss" scoped>
.gauge-chart {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .chart-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    
    .chart-title {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  .chart-content {
    // padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .chart-svg {
      .background-arc {
        opacity: 0.3;
      }
      
      .progress-arc {
        transition: all 0.5s ease;
      }
      
      .pointer {
        transition: all 0.5s ease;
      }
      
      .tick-line {
        opacity: 0.6;
      }
      
      .tick-label {
        font-size: 11px;
        fill: #909399;
      }
    }
    
    .value-display {
      margin-top: 16px;
      text-align: center;
      
      .current-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 4px;
      }
      
      .value-range {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}
</style> 